<template>
    <div>
        <!-- {{ list }} -->
        <el-input :placeholder="$t('请输入要查询关键字')" size="mini">
            <el-button slot="append" icon="el-icon-search" />
        </el-input>

        <!-- 区域显示内容 -->
        <div v-for="(item, index) in list" :key="index" style="margin-top: 10px;">
            <el-popover v-show="centerIndex != index" placement="bottom" width="120" trigger="click">
                <div v-for="BtnItem in btnList" :key="BtnItem" class="btn_div" @click="btnFun(BtnItem, index)">{{ BtnItem }}
                </div>
                <div slot="reference" class="left_content">
                    <i class="el-icon-edit" style="font-size: 16px;"></i>
                    <span class="left_text">{{ item.text }}</span>
                </div>
            </el-popover>
            <el-input v-show="showInput && centerIndex == index" v-model="item.text" placeholder="请输入内容"
                class="input-with-select" size="mini">
                <el-button slot="append" icon="el-icon-check" @click="nameFun" />
            </el-input>
        </div>
    </div>
</template>
<script>
export default {
    props: ['listIndex', 'centerList'],
    data() {
        return {
            btnList: ['重命名', '复制', '粘贴', '隐藏图层', '删除'],
            showInput: false,
            centerIndex: null,
            list : this.centerList,
        }
    },
    methods: {
        btnFun(e, index) {
            if (e == '重命名') {
                this.centerIndex = index
                this.showInput = true
            } else if (e == '复制') {
                console.log('');
            } else if (e == '粘贴') {
                console.log('');
            } else if (e == '隐藏图层') {
                console.log('');
            } else if (e == '删除') {
                this.$emit('update:listIndex', null)
                this.list.splice(index, 1)
            }
        },
        nameFun() {
            this.showInput = false
            this.centerIndex = null
        }
    }
}
</script>

<style scoped>
.left_content {
    margin-top: 13px;
}

.left_text {
    font-size: 14px;
    padding-left: 8px;
    color: #333333;
}

.btn_div {
    height: 30px;
    width: 120px;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
}
</style>